<!--  设置招生专业  -->
<template>
  <div>
    <div style="display: flex; width: 100% !important;">
      <table style="width:100%">
        <tr>
          <td style="width:50%"
              valign="top">
            <div class="title1"><span class="span1">可选的专业列表（<span style="color:red">{{ tableData1.length }}个</span>）</span></div>
            <el-table :data="tableData1"
                      ref="ass"
                      class="xpaas-table-class"
                      row-class-name="xpaas-row-class"
                      cell-class-name="xpaas-cell-class"
                      header-row-class-name="xpaas-header-row-class"
                      header-cell-class-name="xpaas-header-cell-class"
                      @selection-change="handleSelectionChange"
                      max-height="620">
              <el-table-column type="selection"
                               width="60"
                               align="center"></el-table-column>
              <el-table-column prop="collegeCode"
                               label="专业代码"
                               align="center">
              </el-table-column>
              <el-table-column align="center"
                               label="专业名称【培养层次】">
                <template slot-scope="scope">
                  {{ scope.row.name }}【{{ scope.row.trainingLevel }}】
                  <!-- <span style="width: 60px; display: block"></span> -->
                </template>
              </el-table-column>
            </el-table>
          </td>
          <td>
            <img src="@/assets/assessment/enjiantou.png"
                 @click="tj" />
          </td>
          <td valign="top"
              style="width:50%">
            <div class="title2">
              <div class="span2">已选的专业列表（<span style="color:red">{{ tableData2.length }}个</span>）</div>
              <div class="plsc-button" style="display:inline-flex;width:100px;position:absolute;top: 10px;right: 0;" @click="delAll">
                <!-- <img src="@/assets/assessment/删除.png" alt="" /> -->
                <span>全部删除</span>
              </div>
            </div>
            <el-table :data="tableData2"
                      class="xpaas-table-class"
                      row-class-name="xpaas-row-class"
                      cell-class-name="xpaas-cell-class"
                      header-row-class-name="xpaas-header-row-class"
                      header-cell-class-name="xpaas-header-cell-class"
                      max-height="620">
              <el-table-column prop="collegeCode"
                               label="专业代码"
                               align="center">
              </el-table-column>
              <!-- <el-table-column prop="name" align="center">
              <template slot-scope="scope" slot="header">
                <div style="line-height: 12px">专业名称</div>
                <span>【培养层次】</span>
              </template>
              <template slot-scope="scope">
                <div style="display: flex; width: 100px; margin: 0 auto">
                  <div style="margin-right: 20px">{{ scope.row.name }}</div>
                  <span>{{ scope.row.trainingLevel }}</span>
                </div>
              </template>
            </el-table-column> -->
              <el-table-column align="center"
                               label="专业名称【培养层次】">
                <template slot-scope="scope">
                  {{ scope.row.name }}【{{ scope.row.trainingLevel }}】
                  <!-- <span style="width: 60px; display: block"></span> -->
                </template>
              </el-table-column>
              <el-table-column prop="delete"
                               label="删除"
                               align="center">
                <template slot-scope="scope">
                  <div class="plsc-button"
                       @click="pjByIdGuide(scope.$index, scope.row)"
                       style="width: 60px;margin:0 auto">
                       <!-- <img src="@/assets/assessment/删除.png" alt="" /> -->
                    <span>删 除</span>
                  </div>
                  <!-- <el-button type="danger" size="small" @click="pjByIdGuide(scope.$index)">删除</el-button> -->
                </template>
              </el-table-column>
            </el-table>
          </td>
        </tr>
      </table>
    </div>
    <!-- <div class="footer"> -->
    <div class="button-group">
      <div @click="xyb">
        <div>下一步</div>
      </div>
      <div @click="pjByIdGuide2">
        <div>取 消</div>
      </div>
    </div>
    <!-- <el-button
          @click="xyb"
          type="success"
          >下一步
        </el-button>
        <el-button
          @click="pjByIdGuide2"
          type="danger"
          style="width:84px;margin-left:60px"
          >取 消
        </el-button> -->
    <!-- </div> -->
  </div>
</template>
<script>
import { szzszy,queryrightspectily } from '@/api/professional/details'
let tableListItem = ""
const findSpecialty = (item) => {
  return item.id === tableListItem;
};

export default {
  data() {
    return {
      tableData1: [],
      tableData2: [],
    }
  },
  created() {
    this.getlist();
    this.queryright()
  },
  methods: {
    pjByIdGuide2() {
      this.$router.push('/admin/professional/setup')
    },
    handleSelectionChange(val) {
      this.tablelist = val
    },
    getlist() {
      return new Promise(() => {
        szzszy().then((res) => {
          this.tableData1 = res.data.data
        })
      })
    },
    queryright(){
      queryrightspectily(this.$route.query.nd).then((res) => {
        this.tableData2 = res.data.data
      })
    },
    tj() {
      for (const selectedItem of this.tablelist) {
        this.tableData2.push(selectedItem)
        tableListItem = selectedItem.id
        const idx = this.tableData1.findIndex(findSpecialty)
        this.tableData1.splice(idx, 1);
      }
      tableListItem = null
      this.tablelist = []
    },
    //单个删除
    pjByIdGuide(index, rowData) {
      this.tableData1.push(rowData)
      this.tableData2.splice(index, 1)
    },
    //全部删除
    delAll(){
      for (const selectedItem of this.tableData2) {
        this.tableData1.push(selectedItem)
      }
      this.tableData2 = [];
    },
    xyb() {
      let nd = this.$route.query.nd
      this.$router.push({
        path: '/admin/professional/information',
        query: { tablelist: this.tableData2, nd: nd },
      })
    },
  },
}
</script>
<style scoped lang="less">
.plsc-button {
  height: 28px;
  background: #ffefef;
  border: 1px solid #fa5339;
  border-radius: 6px;
  color: #ff3819;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  img {
    width: 14px;
    height: 14px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // margin: 2px 5px 0 0;
    margin-right: 8px;
  }
}
.button-group {
  cursor: pointer;
  margin-top: 50px;
  text-align: center;

  > div {
    display: inline-block;
    font-size: 18px;
    padding: 6px 22px;
    border-radius: 6px;

    &:nth-child(1) {
      color: #f3b815;
      border: 1px solid #f3b815;
      background: #fff6ef;
      margin-right: 139px;
    }

    &:nth-child(2) {
      color: #ff3819;
      border: 1px solid #ff3819;
      background: #ffefef;
    }
  }
}
.el-table {
  ::v-deep td.cell-class {
    line-height: 57px;
    height: 57px;
  }
}
.avue-view {
  // padding: 30px;
}
img {
  width: 80px;
  height: 80px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.title1 {
  width: 100%;
  height: 51px;
  // background: #EDF2F9;
  border-radius: 5px 5px 0px 0px;
}
.span1 {
  display: block;
  font-weight: bold;
  line-height: 39px;
  padding: 0px 20px;
  color: #004ca7;
  text-align: center;
}
.title2 {
  width: 100%;
  height: 51px;
  // background: #EDF2F9;
  border-radius: 5px 5px 0px 0px;
  position: relative;
}
.span2 {
  display: block;
  font-weight: bold;
  padding: 0px 20px;
  line-height: 39px;
  color: #004ca7;
  text-align: center;
}
.footer {
  width: 230px;
  margin: 0 auto;
  margin-top: 50px;
  .btn1 {
    width: 87px;
    height: 36px;
    background: #fff6ef;
    border: 1px solid #f3b815;
    opacity: 1;
    border-radius: 6px;
    color: #f3b815;
    margin-right: 40px;
  }
  .btn2 {
    width: 87px;
    height: 36px;
    background: #ffefef;
    border: 1px solid #ff3819;
    opacity: 1;
    border-radius: 6px;
    color: #ff3819;
    margin-left: 100px;
  }
}
@fontFamily: 'Microsoft YaHei';
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;

            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
</style>
